<template>
  <Page name="转账到乐马账号">
    <nuxt-link to="/accept/list?idx=0" slot="right" class="text-primary header-link">转账记录</nuxt-link>
    <form @keypress.enter="submit" onsubmit="return false">
      <div class="item fx fx-vc">
        <div class="label">户口号</div>
        <div class="field flex">
          <Input type="tel" v-model="account" placeholder="请输入对方户口号"/>
        </div>
      </div>
      <div class="form-btn">
        <button type="button"
                class="btn btn-primary btn-block"
                :disabled="!String(this.account).trim() || this.posting"
                @click="submit">下一步</button>
      </div>
    </form>
  </Page>
</template>

<script>
import Page from '~/components/page'
import Input from '~/components/Input'

export default {
  components:{
    Input,
    Page
  },
  asyncData({store}){
    return {account: store.state.accept.account};
  },
  data(){
    return {
      posting:false,
    }
  },
  methods:{
    async submit(){
      if(!String(this.account).trim() || this.posting) return false;
      this.posting = true;
      try{
        let {data:rs} = await this.$axios.post('?ct=api&ac=account_is_exists',{account:this.account});
        if(rs.code === 0){

          //进入下一步，缓冲用户信息
          this.$store.commit('accept/setAccount',this.account);
          this.$store.commit('accept/setUserInfo',rs.data.user_info);

          this.$router.push({name:'accept-info'});
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
      this.posting = false;
    }
  }
}
</script>

<style lang="less" scoped>
.header-link {
    position: absolute;
    top:0;
    right:0;
    height:100%;
    padding:0 30px;
    font-size:30px;
  }
  .item {
    margin:20px 0 20px;
    padding:4px 30px;
    background-color:#fff;

    .label {
      margin-right:60px;
      font-size:30px;
      color:#292929;
    }
  }

  .form-btn {
    padding:30px;
  }
</style>

